<template>
  <view>
    <u-form labelPosition="left" :model="form" ref="form">
      <u-form-item
          label="借款金额"
          prop="repaymentMoney"
          borderBottom
          ref="item1"
          labelWidth="65"
      >
        <u-input
            v-model="form.repaymentMoney"
            placeholder="请输入借款金额"
            border="none"
            type="digit"
        ></u-input>
      </u-form-item>
      <u-form-item
          label="借款日期"
          prop="owedTime"
          borderBottom
          labelWidth="65"
          @click="showOwedTime = true; "
      >
        <u-input
            v-model="time"
            placeholder="请输入借款日期"
            disabled
            disabledColor="#ffffff"
            border="none"
        ></u-input>
        <u-icon
            slot="right"
            name="arrow-right"
        ></u-icon>
      </u-form-item>
    </u-form>
    <u-datetime-picker
        ref="datetimePicker"
        :show="showOwedTime"
        v-model="time"
        mode="date"
        :formatter="formatter"
        @cancel="showOwedTime = false"
        @confirm="confirmOwedTime"
    ></u-datetime-picker>
  </view>

</template>

<script>
export default {
  name: "request",
  props: {
    form: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      showOwedTime: false,
      time: "",
      newForm: {}
    };
  },
  watch: {
    newForm(val, oldVal){
      this.$emit('updateForm', val)
    },
    form(){
      this.newForm = this.form;
      console.log("form",this.form);
    },
    time(val, oldVal){
      //将时间戳转换为时间
      let date = new Date(val);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      //如果月份小于10，前面补0
      if (month < 10) {
        month = "0" + month;
      }
      //如果日期小于10，前面补0
      if (day < 10) {
        day = "0" + day;
      }
      this.time= year + "-" + month + "-" + day + " ";
      this.form.owedTime = this.time;
      this.showOwedTime = false;
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.datetimePicker.setFormatter(this.formatter);
    });
    this.newForm = this.form;
  },
  methods:{
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    confirmOwedTime(value) {
      //将时间戳转换为时间
      // let date = new Date(value.value);
      // let year = date.getFullYear();
      // let month = date.getMonth() + 1;
      // let day = date.getDate();
      // //如果月份小于10，前面补0
      // if (month < 10) {
      //   month = "0" + month;
      // }
      // //如果日期小于10，前面补0
      // if (day < 10) {
      //   day = "0" + day;
      // }
      // let timeTemp = year + "-" + month + "-" + day + " ";
      // this.form.owedTime = timeTemp;
      // console.log("借款时间",this.form.owedTime);
      // this.showOwedTime = false;
      // console.log("借款时间2222",this.form.owedTime);
    },
  }
}
</script>

<style scoped>

</style>